<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 1. 引入react相关的库文件 -->
  <script src="./js/react.development.js"></script>

  <script src="./js/react-dom.development.js"></script>
</head>
<body>
  <!-- 2. 提供一个空div容器标签 -->
  <div id="root"></div>

  <script>
    /* 3. 创建一个React元素对象     不是DOM元素*/
    const element = React.createElement(
      'h1',
      {title: '你好, React!'},  // 如果没有属性 null
      'Hello React!'
    )
    console.log(element)  // React元素
    console.log(document.getElementById('root')) // 真实DOM元素
    /* 
    React元素是什么? 它与DOM元素是什么关系?
      也称虚拟DOM元素 / 虚拟节点
      React元素是一个普通的对象, 包含的属性比较少(10个左右) => 较轻的对象
        {
          props: {title: '你好, React!', children: 'Hello React!'}
          type: "h1"
        }
      包含了用于生成对应的真实DOM必要信息属性数据
          标签名  type: "h1"
          标签属性: props: {title: '你好, React!'}
          子节点: props: {children: 'Hello React!'}
      真实DOM元素
        包含的属性很多(几十个) => 较重的对象
      React元素最终可以转换为真实DOM元素: RectDOM.render()来转换
    */
    /*
    domEle = document.createElement('h1')
    domEle.setAttribute('title', 'xxx')
    domEle.innerText = 'Hello React!'
    document.getElementById('root').appendChild(domEle)
    */


    /* 4. 将React元素渲染到页面     React元素==> DOM元素*/
    ReactDOM.render(element, document.getElementById('root'))
  </script>
</body>
</html>